import Taro, {Component } from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from "@tarojs/mobx";
import PageFooterInfo from "../../components/PageFooterInfo";
import ViewPhone from "../../components/ViewPhone";
import Report from "../../components/Report";
import {IStoreProps} from "../../store/Stores";

import {getRuntime,getAvatar,subtime} from '../../utils/common'

import './index.less'
import './demand_detail.less'



// 服务详情
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }
  state = {
    isVip: false,
    info:{}
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({ title:'服务详情' })
    let id = this.$router.params.id
    if(!id) { getRuntime().navigateBack()}
    this.getInfomationInfos(parseInt(id))
    let userInfo = getRuntime().getUserInfo()
    //console.log(userInfo)
    if(userInfo&&userInfo.agencyLevel>0){ this.setState({isVip: true}) }
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getInfomationInfos(formId) {
    let { homeStore } = this.props.stores
    homeStore.getInfomationInfos({
      formId,
      callback: home => {
        //console.log(home)
        this.setState({
          info: toJS(home)
        })
      }
    })
  }
  render() {
    let { info,isVip } = this.state
    return (
      <View className='newest-index demand_detail'>
        <View className='list-13-item'>
          <View className='line'>
            <View className={'l'}>
              <Image className={'pic'} src={getAvatar(info.userLogoImg)}/>
              <View>
                <View className='name'>{info.userNickName}</View>
                <View className='list-info'>{subtime(info.creationTime)}</View>
              </View>
            </View>
            <View className='r'>{info.numberOfVisits}次浏览</View>
          </View>
          <View className={'personnel-desc'}>
            {info.description}
          </View>
        </View>

        <View className='column-title content-30'>
          <Text className='column-name'>联系方式</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>联系人：</Text>
            {isVip&&<Text className='name'>{info.contacts}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
            { !isVip&& <ViewPhone />}
          </View>
          <View className='line'>
            <Text className='title'>联系电话：</Text>
            {isVip&&<Text className='name'>{info.phone}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>微信号：</Text>
            {isVip&&<Text className='name'>{info.wechatNo}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>QQ号：</Text>
            {isVip&&<Text className='name'>{info.qqNo}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
        </View>
        <View className='interval' />
        <Report />
        <PageFooterInfo />

      </View>
    )
  }
}

export default Personnel
